<template>
  <div class="page-home">
    <div class="home-entry">
      <div class="container">
        <!-- 左侧分类 -->
        <homeCategoryVue />
        <!-- 右侧轮播图 -->
        <div class="home-banner">
          <homeBannerVue />
        </div>
        <!-- 新鲜好物 -->
        <homeNewVue />
        <!-- 人气推荐 -->
        <homeHotVue />
        <!-- 热门品牌 -->
        <homeBrandVue />
      </div>
    </div>
  </div>
</template>

<script>
// 引入子组件
import homeCategoryVue from './components/home-category.vue'
import homeBannerVue from './components/home-banner.vue'
// import homePanelVue from './components/home-panel.vue'
import homeNewVue from './components/home-new.vue'
import homeHotVue from './components/home-hot.vue'
import homeBrandVue from './components/home-brand.vue'
// 引入useStore
import { useStore } from 'vuex'
export default {
  name: 'Home',
  components: {
    homeCategoryVue,
    homeBannerVue,
    // homePanelVue,
    homeNewVue,
    homeHotVue,
    homeBrandVue
  },
  setup () {
    const store = useStore()
    // 调用-轮播图数据
    store.dispatch('category/getBannerListActions')
  }
}
</script>

<style scoped lang="less">
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}
</style>
